<template>
  <div class="data">
    <Backheader :title="chu"></Backheader>
    <div class="section">
      <van-tabs v-model:active="active">
        <van-tab title="月份">
          <van-calendar
            title="日历"
            :poppable="false"
            :show-confirm="false"
            :style="{ height: '100%' }"
          />
          
        </van-tab>
        <van-tab title="日程">
          <div class="card">
            <div class="left">
              <p><van-tag plain type="primary">标签</van-tag></p>

              <p>2021年3月15日 星期六</p>
              <p>农历九月初九</p>
              <p>日常备注：外出出差见客户</p>
            </div>
            <div class="right">
              <van-icon name="delete-o" />
            </div>
          </div>
          <van-divider />
        </van-tab>
      </van-tabs>
    </div>
    <div class="btn">
            <van-button type="primary" size="large" @click="dian"
              >添加日程</van-button
            >
    </div>
  </div>
</template>

<script>
import Backheader from "../../components/backHeader";
import { Dialog } from "vant";
import { ref } from "vue";
export default {
  components: {
    Backheader,
  },
  data() {
    return {};
  },
  setup() {
    let chu = ref("日程管理");

    return {
      chu,
    };
  },

  methods: {
    dian() {
      Dialog.confirm({
        title: "标题",
        message: "弹窗内容",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.section{
    flex: 1;
    overflow: auto;
}
.btn {
  width: 100%;
  height: 2rem;
  padding: 0 20px;
  box-sizing: border-box;
}
.card {
  width: 100%;
  display: flex;
  padding: 0.4rem;
  box-sizing: border-box;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    p{
      font-size: 12px;
      list-style: none;
    }
  }
  .right {
    width: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>